Tarayıcı Eklenti Geliştirme: Manifest V3 ve JavaScript API'lerinde Gezinme

Tarayıcı eklentileri, tarama deneyimini iyileştirmenin ve özelleştirmenin güçlü bir yolunu sunar. Geliştiricilerin web tarayıcılarına işlevsellik eklemesine, web sayfalarıyla etkileşim kurmasına ve web hizmetleriyle entegre olmasına olanak tanırlar. Bu kılavuz, Manifest V3'e ve bu eklentilere güç veren temel JavaScript API'lerine odaklanarak tarayıcı eklenti geliştirmeye kapsamlı bir genel bakış sunar.

Tarayıcı Eklentilerini Anlamak

Tarayıcı eklentisi, bir web tarayıcısının işlevselliğini genişleten küçük bir yazılım programıdır. Eklentiler, web sayfalarını değiştirebilir, yeni özellikler ekleyebilir ve harici hizmetlerle entegre olabilir. Genellikle JavaScript, HTML ve CSS ile yazılırlar ve eklentinin meta verilerini ve izinlerini açıklayan bir manifest dosyası içeren bir ZIP dosyası olarak paketlenirler.

Tarayıcı eklentileri için popüler kullanım örnekleri şunlardır:

• Reklam engelleyiciler: Web sayfalarından reklamları kaldırır.
• Şifre yöneticileri: Şifreleri güvenli bir şekilde saklar ve yönetir.
• Verimlilik araçları: Görev yönetimi ve not alma gibi özelliklerle iş akışını geliştirir.
• İçerik özelleştirme: Web sayfalarının görünümünü ve davranışını değiştirir.
• Erişilebilirlik araçları: Engelli kullanıcılar için web erişilebilirliğini iyileştirir.

Manifest V3: Yeni Standart

Manifest V3, eklentinin meta verilerini, izinlerini ve kaynaklarını açıklayan bir JSON dosyası olan tarayıcı eklentisi manifest dosyasının en son sürümüdür. Başlıca olarak geliştirilmiş güvenlik, gizlilik ve performansa odaklanarak eklenti geliştirme sürecinde önemli değişiklikler getirir. Manifest V3'teki temel değişiklikler şunlardır:

• Service Workers: Geliştirilmiş performans ve azaltılmış bellek tüketimi için arka plan sayfalarının service worker'larla değiştirilmesi. Service worker'lar, arka planda çalışan ve ağ istekleri ve alarmlar gibi olayları işleyen olay odaklı komut dosyalarıdır.
• Declarative Net Request API: Ağ isteklerini filtrelemek için engelleme webRequest API'sinin Declarative Net Request API'si ile değiştirilmesi. Bu, eklentinin ağ trafiğine erişimini sınırlayarak gizliliği ve güvenliği artırır.
• Content Security Policy (CSP): Keyfi kodun yürütülmesini önlemek ve güvenlik risklerini azaltmak için daha katı CSP ilkelerinin uygulanması.
• Manifest Version: manifest.json dosyasındaki manifest_version anahtarının 3 olarak ayarlanması gerekir.

Manifest V2'den Manifest V3'e Geçiş

Manifest V2'den Manifest V3'e geçiş, dikkatli planlama ve kod değişiklikleri gerektirir. İşte adım adım bir kılavuz:

1. Manifest dosyasını güncelleyin: manifest_version'ı 3 olarak ayarlayın ve permissions ve background alanlarını Manifest V3 gereksinimlerine uyacak şekilde güncelleyin.
2. Arka plan sayfalarını service worker'larla değiştirin: Arka plan komut dosyalarını service worker olarak yeniden yazın ve olayları chrome.scripting ve chrome.alarms API'lerini kullanarak işleyin.
3. Declarative Net Request API'sine geçin: Engelleme webRequest API çağrılarını, declarativeNetRequest API'sinde tanımlanan bildirimsel kurallarla değiştirin.
4. İçerik güvenlik politikasını güncelleyin: Manifest dosyasındaki content_security_policy alanını daha katı CSP gereksinimlerine uyacak şekilde ayarlayın.
5. Kapsamlı bir şekilde test edin: Uyumluluğu ve doğru işlevselliği sağlamak için eklentiyi farklı tarayıcılarda kapsamlı bir şekilde test edin.

Örnek: Bir Arka Plan Komut Dosyasını Service Worker'a Geçirme

Manifest V2 (background.js):

            chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    return {cancel: true};
  },
  {urls: ["*.example.com/*"]},
  ["blocking"]
);

            

              
                Copy
              
            
          

Manifest V3 (service-worker.js):

            chrome.declarativeNetRequest.updateDynamicRules({
  removeRuleIds: [1],
  addRules: [{
    "id": 1,
    "priority": 1,
    "action": { "type": "block" },
    "condition": { "urlFilter": "*.example.com/*", "resourceTypes": ["main_frame", "sub_frame", "stylesheet", "script", "image", "object", "xmlhttprequest", "other"] }
  }]
});

            

              
                Copy
              
            
          

manifest.json (Manifest V3):

            {
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "A simple extension",
  "permissions": [
    "declarativeNetRequest",
    "declarativeNetRequestFeedback",
    "storage"
  ],
  "background": {
    "service_worker": "service-worker.js"
  },
  "declarative_net_request": {
    "rule_resources": [{
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules.json"
    }]
  }
}

            

              
                Copy
              
            
          

Tarayıcı Eklentileri için Temel JavaScript API'leri

Tarayıcı eklentileri, tarayıcı ve web sayfalarıyla etkileşim kurmak için bir dizi JavaScript API'sine güvenir. İşte en önemli API'lerden bazıları:

1. chrome.runtime

chrome.runtime API'si, eklentinin çalışma zamanı ortamına erişim sağlar. Eklentilerin arka plan komut dosyasıyla iletişim kurmasına, manifest dosyasına erişmesine ve eklentinin yaşam döngüsünü yönetmesine olanak tanır.

Temel yöntemler:

• chrome.runtime.sendMessage(): Arka plan komut dosyasına veya diğer eklentilere bir mesaj gönderir.
• chrome.runtime.onMessage.addListener(): Diğer komut dosyalarından gelen mesajları dinler.
• chrome.runtime.getManifest(): Eklentinin manifest dosyasını bir JavaScript nesnesi olarak döndürür.
• chrome.runtime.reload(): Eklentiyi yeniden yükler.

Örnek: İçerik Komut Dosyasından Arka Plan Komut Dosyasına Mesaj Gönderme

İçerik Komut Dosyası (content.js):

            chrome.runtime.sendMessage({message: "Hello from content script!"}, function(response) {
  console.log("Response from background script: ", response.message);
});

            

              
                Copy
              
            
          

Arka Plan Komut Dosyası (service-worker.js):

            chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log("Message from content script: ", request.message);
    sendResponse({message: "Hello from background script!"});
  }
);

            

              
                Copy
              
            
          

2. chrome.storage

chrome.storage API'si, eklenti içinde veri depolamak ve almak için bir mekanizma sağlar. Hem yerel hem de senkronize depolama seçenekleri sunar.

Temel yöntemler:

• chrome.storage.local.set(): Verileri yerel olarak depolar.
• chrome.storage.local.get(): Verileri yerel depolamadan alır.
• chrome.storage.sync.set(): Kullanıcının cihazları arasında senkronize edilen verileri depolar.
• chrome.storage.sync.get(): Verileri senkronize depolamadan alır.

Örnek: Verileri Yerel Depolamada Depolama ve Alma

            // Store data
chrome.storage.local.set({key: "value"}, function() {
  console.log("Value is set to " + "value");
});

// Retrieve data
chrome.storage.local.get(["key"], function(result) {
  console.log("Value currently is " + result.key);
});

            

              
                Copy
              
            
          

3. chrome.tabs

chrome.tabs API'si, eklentilerin tarayıcı sekmeleriyle etkileşim kurmasına olanak tanır. Sekme oluşturmak, sorgulamak, değiştirmek ve kapatmak için yöntemler sağlar.

Temel yöntemler:

• chrome.tabs.create(): Yeni bir sekme oluşturur.
• chrome.tabs.query(): Belirli kriterlere uyan sekmeleri sorgular.
• chrome.tabs.update(): Bir sekmenin özelliklerini günceller.
• chrome.tabs.remove(): Bir sekmeyi kapatır.
• chrome.tabs.executeScript(): Bir sekmede JavaScript kodu yürütür.

Örnek: Yeni Bir Sekme Oluşturma

            chrome.tabs.create({url: "https://www.example.com"}, function(tab) {
  console.log("New tab created with ID: " + tab.id);
});

            

              
                Copy
              
            
          

4. chrome.alarms

chrome.alarms API'si, eklentilerin belirli bir zamanda veya belirtilen bir aralıktan sonra yürütülecek görevleri planlamasına olanak tanır. Bu, artık desteklenmeyen arka plan sayfalarında zamanlayıcıların kullanımının yerini aldığından, Manifest V3'te özellikle önemlidir.

Temel yöntemler:

• chrome.alarms.create(): Yeni bir alarm oluşturur.
• chrome.alarms.get(): Mevcut bir alarmı alır.
• chrome.alarms.clear(): Bir alarmı temizler.
• chrome.alarms.getAll(): Tüm alarmları alır.
• chrome.alarms.onAlarm.addListener(): Alarm olaylarını dinler.

Örnek: Bir Alarm Oluşturma

            chrome.alarms.create("myAlarm", {delayInMinutes: 1, periodInMinutes: 1});

chrome.alarms.onAlarm.addListener(function(alarm) {
  if (alarm.name === "myAlarm") {
    console.log("Alarm triggered!");
  }
});

            

              
                Copy
              
            
          

5. chrome.scripting

chrome.scripting API'si, eklentilerin web sayfalarına JavaScript ve CSS eklemesine olanak tanır. Bu API, Manifest V3'ün temel bir bileşenidir ve service worker'lar tarafından yüklendikten sonra web sayfalarıyla etkileşim kurmak için kullanılır.

Temel yöntemler:

• chrome.scripting.executeScript(): Bir sekmede veya çerçevede JavaScript kodu yürütür.
• chrome.scripting.insertCSS(): Bir sekmeye veya çerçeveye CSS ekler.

Örnek: Bir Sekmeye JavaScript Ekleme

            chrome.scripting.executeScript({
  target: {tabId: tabId},
  function: function() {
    console.log("Injected script!");
    document.body.style.backgroundColor = 'red';
  }
});

            

              
                Copy
              
            
          

6. chrome.notifications

chrome.notifications API'si, eklentilerin kullanıcıya bildirimler göstermesine olanak tanır. Bu, güncellemeler, uyarılar ve diğer önemli bilgileri sağlamak için kullanışlıdır.

Temel yöntemler:

• chrome.notifications.create(): Yeni bir bildirim oluşturur.
• chrome.notifications.update(): Mevcut bir bildirimi günceller.
• chrome.notifications.clear(): Bir bildirimi temizler.
• chrome.notifications.getAll(): Tüm bildirimleri alır.

Örnek: Bir Bildirim Oluşturma

            chrome.notifications.create('myNotification', {
  type: 'basic',
  iconUrl: 'icon.png',
  title: 'My Extension',
  message: 'Hello from my extension!'
}, function(notificationId) {
  console.log('Notification created with ID: ' + notificationId);
});

            

              
                Copy
              
            
          

7. chrome.contextMenus

chrome.contextMenus API'si, eklentilerin tarayıcının bağlam menüsüne (sağ tıklama menüsü) öğeler eklemesine olanak tanır. Bu, kullanıcıların web sayfalarından doğrudan eklenti işlevselliğine erişmeleri için uygun bir yol sağlar.

Temel yöntemler:

• chrome.contextMenus.create(): Yeni bir bağlam menüsü öğesi oluşturur.
• chrome.contextMenus.update(): Mevcut bir bağlam menüsü öğesini günceller.
• chrome.contextMenus.remove(): Bir bağlam menüsü öğesini kaldırır.
• chrome.contextMenus.removeAll(): Eklenti tarafından oluşturulan tüm bağlam menüsü öğelerini kaldırır.

Örnek: Bir Bağlam Menüsü Öğesi Oluşturma

            chrome.contextMenus.create({
  id: "myContextMenuItem",
  title: "My Context Menu Item",
  contexts: ["page", "selection"]
}, function() {
  console.log("Context menu item created.");
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
  if (info.menuItemId === "myContextMenuItem") {
    console.log("Context menu item clicked!");
    alert("You clicked the context menu item!");
  }
});

            

              
                Copy
              
            
          

8. chrome.i18n

chrome.i18n API'si, eklentinizi farklı dil ve bölgelerdeki kullanıcılara erişilebilir hale getirerek uluslararasılaştırmak için kullanılır. Eklentinizin kullanıcı arayüzünün ve mesajlarının yerelleştirilmiş sürümlerini sağlamanıza olanak tanır.

Temel Yöntemler:

• chrome.i18n.getMessage(): Eklentinin _locales dizininden yerelleştirilmiş bir dize alır.

Örnek: Yerelleştirme için chrome.i18n Kullanma

Öncelikle, eklentinizin kök klasöründe bir _locales dizini oluşturun. İçine, en, es, fr vb. gibi dile özgü klasörler oluşturun.

Her dil klasörünün içinde bir messages.json dosyası oluşturun. Örneğin, _locales/en/messages.json içinde:

            {
  "extensionName": {
    "message": "My Extension",
    "description": "The name of the extension."
  },
  "greetingMessage": {
    "message": "Hello, world!",
    "description": "A simple greeting message."
  }
}

            

              
                Copy
              
            
          

Ardından, JavaScript kodunuzda:

            let extensionName = chrome.i18n.getMessage("extensionName");
let greeting = chrome.i18n.getMessage("greetingMessage");
console.log(extensionName); // Output: My Extension
console.log(greeting);      // Output: Hello, world!

            

              
                Copy
              
            
          

Tarayıcılar Arası Uyumluluk

Chrome, eklenti geliştirme için en popüler tarayıcı olsa da, tarayıcılar arası uyumluluğu göz önünde bulundurmak önemlidir. Firefox, Safari ve diğer tarayıcılar da eklentileri destekler, ancak API'leri ve manifest biçimleri biraz farklılık gösterebilir.

Tarayıcılar arası uyumluluğu sağlamak için:

• WebExtensions API'sini kullanın: WebExtensions API, birden çok tarayıcı tarafından desteklenen tarayıcı eklenti geliştirme için standartlaştırılmış bir API'dir.
• Farklı tarayıcılarda test edin: Uyumluluk sorunlarını belirlemek ve düzeltmek için eklentinizi farklı tarayıcılarda test edin.
• Polyfill'ler kullanın: Farklı tarayıcılarda eksik API işlevselliği sağlamak için polyfill'ler kullanın.
• Koşullu kod: Tarayıcıya özgü farklılıklara uyum sağlamak için koşullu kod kullanın. Örneğin: if (typeof browser === "undefined") { var browser = chrome; }

Tarayıcı Eklenti Geliştirme için En İyi Uygulamalar

Tarayıcı eklentileri geliştirirken izlenecek bazı en iyi uygulamalar şunlardır:

• İzinleri en aza indirin: Yalnızca eklentinizin kesinlikle ihtiyaç duyduğu izinleri isteyin. Bu, kullanıcı gizliliğini ve güvenliğini artırır.
• Güvenli kodlama uygulamaları kullanın: Siteler arası komut dosyası (XSS) ve kod enjeksiyonu gibi güvenlik açıklarını önlemek için güvenli kodlama uygulamalarını izleyin.
• Performansı optimize edin: Eklentinizin tarayıcı performansı üzerindeki etkisini en aza indirmek için performansını optimize edin.
• Açık ve özlü belgeler sağlayın: Kullanıcıların eklentinizi nasıl kullanacaklarını anlamalarına yardımcı olmak için açık ve özlü belgeler sağlayın.
• Hataları zarif bir şekilde ele alın: Eklentinizin çökmesini veya beklenmedik davranışlara neden olmasını önlemek için hata işlemeyi uygulayın.
• Eklentinizi güncel tutun: Hataları, güvenlik açıklarını ve uyumluluk sorunlarını gidermek için eklentinizi düzenli olarak güncelleyin.
• Uluslararasılaştırmayı (i18n) göz önünde bulundurun: Eklentinizi farklı dillere kolayca yerelleştirilebilecek şekilde tasarlayın. chrome.i18n API'sini kullanın.
• Kullanıcı gizliliğine saygı gösterin: Eklentinizin kullanıcı verilerini nasıl topladığı ve kullandığı konusunda şeffaf olun ve gerektiğinde kullanıcı onayı alın. GDPR ve CCPA gibi ilgili gizlilik düzenlemelerine uyun.

Eklentinizi Mağazalara Gönderme

Eklentiniz geliştirildikten ve test edildikten sonra, kullanıcıların kullanımına sunmak için tarayıcı eklenti mağazalarına göndermek isteyeceksiniz. Her tarayıcının kendi mağazası ve gönderim süreci vardır:

• Chrome Web Mağazası: Chrome kullanıcıları için eklentinizi Chrome Web Mağazası'na gönderin. Süreç, bir geliştirici hesabı oluşturmayı, eklentinizi paketlemeyi ve mağazaya yüklemeyi içerir.
• Firefox Eklentileri: Firefox kullanıcıları için eklentinizi Firefox Eklentileri'ne gönderin. Süreç, Chrome Web Mağazası'na benzer ve bir geliştirici hesabı oluşturmayı ve eklentinizi inceleme için göndermeyi içerir.
• Safari Eklenti Galerisi: Safari kullanıcıları için eklentinizi Safari Eklenti Galerisi'ne gönderin. Süreç, Apple'dan bir geliştirici sertifikası almayı ve eklentinizi inceleme için göndermeyi içerir.

Eklentinizi gönderirken, açıklayıcı bir başlık, ayrıntılı bir açıklama, ekran görüntüleri ve bir gizlilik politikası dahil olmak üzere doğru ve eksiksiz bilgi sağlamaya özen gösterin. Eklenti mağazaları, politikalarına ve yönergelerine uyduklarından emin olmak için gönderileri inceler.

Sonuç

Manifest V3 ve JavaScript API'leri ile tarayıcı eklenti geliştirme, tarama deneyimini özelleştirmenin ve geliştirmenin güçlü bir yolunu sunar. Temel kavramları anlayarak, en iyi uygulamaları izleyerek ve tarayıcılar arası uyumluluğu göz önünde bulundurarak, geliştiriciler dünya çapındaki kullanıcılar için değerli ve ilgi çekici eklentiler oluşturabilirler. Web geliştikçe, tarayıcı eklentileri internetin geleceğini şekillendirmede hayati bir rol oynamaya devam edecektir.

Eklentiler geliştirirken her zaman kullanıcı gizliliğine ve güvenliğine öncelik vermeyi unutmayın. Bu ilkeleri akılda tutarak inşa ederek hem kullanışlı hem de güvenilir eklentiler oluşturabilirsiniz.

Bu kılavuz, tarayıcı eklenti geliştirmeye başlamak için sağlam bir temel sağlar. Daha derinlemesine araştırdıkça, mevcut çeşitli API'leri ve özellikleri keşfedin ve yenilikçi ve etkili eklentiler oluşturmak için farklı tekniklerle denemeler yapın.